$u-cell-padding: 10px 15px !default;
$u-cell-font-size: 15px !default;
$u-cell-line-height: 24px !default;
$u-cell-color: $u-main-color !default;
$u-cell-icon-size: 16px !default;
$u-cell-title-font-size: 15px !default;
$u-cell-title-line-height: 22px !default;
$u-cell-title-color: $u-main-color !default;
$u-cell-label-font-size: 12px !default;
$u-cell-label-color: $u-tips-color !default;
$u-cell-label-line-height: 18px !default;
$u-cell-value-font-size: 14px !default;
$u-cell-value-color: $u-content-color !default;
$u-cell-clickable-color: $u-bg-color !default;
$u-cell-disabled-color: #c8c9cc !default;
$u-cell-padding-top-large: 13px !default;
$u-cell-padding-bottom-large: 13px !default;
$u-cell-value-font-size-large: 15px !default;
$u-cell-label-font-size-large: 14px !default;
$u-cell-title-font-size-large: 16px !default;
$u-cell-left-icon-wrap-margin-right: 4px !default;
$u-cell-right-icon-wrap-margin-left: 4px !default;
$u-cell-title-flex: 1 !default;
$u-cell-label-margin-top: 5px !default;

.u-cell {
	&__body {
		@include flex();
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		padding: $u-cell-padding;
		font-size: $u-cell-font-size;
		color: $u-cell-color;
		// line-height: $u-cell-line-height;
		align-items: center;

		&__content {
			@include flex(row);
			align-items: center;
			flex: 1;
		}

		&--large {
			padding-top: $u-cell-padding-top-large;
			padding-bottom: $u-cell-padding-bottom-large;
		}
	}

	&__left-icon-wrap,
	&__right-icon-wrap {
		@include flex();
		align-items: center;
		// height: $u-cell-line-height;
		font-size: $u-cell-icon-size;
	}

	&__left-icon-wrap {
		margin-right: $u-cell-left-icon-wrap-margin-right;
	}

	&__right-icon-wrap {
		margin-left: $u-cell-right-icon-wrap-margin-left;
		transition: transform 0.3s;

		&--up {
			transform: rotate(-90deg);
		}

		&--down {
			transform: rotate(90deg);
		}
	}

	&__title {
		flex: $u-cell-title-flex;

		&-text {
			font-size: $u-cell-title-font-size;
			line-height: $u-cell-title-line-height;
			color: $u-cell-title-color;

			&--large {
				font-size: $u-cell-title-font-size-large;
			}
		}
	}

	&__label {
		margin-top: $u-cell-label-margin-top;
		font-size: $u-cell-label-font-size;
		color: $u-cell-label-color;
		line-height: $u-cell-label-line-height;

		&--large {
			font-size: $u-cell-label-font-size-large;
		}
	}

	&__value {
		text-align: right;
		font-size: $u-cell-value-font-size;
		line-height: $u-cell-line-height;
		color: $u-cell-value-color;

		&--large {
			font-size: $u-cell-value-font-size-large;
		}
	}

	&--clickable {
		background-color: $u-cell-clickable-color;
	}

	&--disabled {
		color: $u-cell-disabled-color;
		/* #ifndef APP-NVUE */
		cursor: not-allowed;
		/* #endif */
	}

	&--center {
		align-items: center;
	}
}
